<template>
<div  class="mystyle">
  <h3>欢迎来到解约合同录入页面</h3>
  <template>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="退租物业交割单" name="first">
        <h4>退租物业交割单</h4>

        <el-form :inline="true" :model="contractDeleteForm" class="demo-form-inline">

          <el-form-item label="*收房合同号">
            <el-input v-model="contractDeleteForm.sfContractId" placeholder="收房合同号"></el-input>
          </el-form-item>

          <el-form-item >
            <el-button type="warning" @click="searchContract">收房合同查询</el-button>
          </el-form-item><br>

          <el-form-item label="*收房合同编号">
            <el-input v-model="contractDeleteForm.sfContractNo" placeholder="收房合同编号"></el-input>
          </el-form-item>

          <el-form-item label="*房产信息">
            <el-input v-model="contractDeleteForm.houseName" placeholder="房产信息"></el-input>
          </el-form-item><br>

          <el-form-item label="*产权地址">
            <el-input v-model="contractDeleteForm.cqAddress" placeholder="产权地址"></el-input>
          </el-form-item>

          <el-form-item label="*房产证书编号">
            <el-input v-model="contractDeleteForm.houseZsNo" placeholder="房产证书编号"></el-input>
          </el-form-item><br>

          <el-form-item label="*业主姓名">
            <el-input v-model="contractDeleteForm.ownerName" placeholder="业主姓名"></el-input>
          </el-form-item>

          <el-form-item label="*业主联系方式">
            <el-input v-model="contractDeleteForm.ownerMobile" placeholder="业主联系方式"></el-input>
          </el-form-item><br>

          <el-form-item label="*签约人姓名">
            <el-input v-model="contractDeleteForm.signUserName" placeholder="签约人姓名"></el-input>
          </el-form-item>

          <el-form-item label="*签约人电话">
            <el-input v-model="contractDeleteForm.signUserMobile" placeholder="签约人电话"></el-input>
          </el-form-item><br>

          <el-form-item label="*物业交割时间">
            <el-date-picker
              v-model="contractDeleteForm.wyjgDate"
              type="date"
              placeholder="选择日期">
            </el-date-picker>
          </el-form-item>

          <el-form-item label="*解约类型">
            <el-select v-model="contractDeleteForm.terminationType" placeholder="解约类型">
              <el-option label="合同到期" value=1></el-option>
              <el-option label="我方提前解约" value=2></el-option>
              <el-option label="租客提前解约" value=3></el-option>
              <el-option label="其他" value=4></el-option>
            </el-select>
          </el-form-item><br><hr>

          应退<br>
          <el-form-item label="*应退类型">
            <el-select v-model="contractDeleteForm.regions" placeholder="应退类型">
              <el-option label="租金" value="租金"></el-option>
              <el-option label="冷水" value="冷水"></el-option>
              <el-option label="电" value="电"></el-option>
              <el-option label="燃气/煤气" value="燃气和煤气"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="*金额(元)">
            <el-input v-model="contractDeleteForm.tui" placeholder="金额(元)" @change="changetotalprice(contractDeleteForm.tui)"></el-input>
          </el-form-item>

          <el-form-item label="*备注">
            <el-input v-model="contractDeleteForm.beizhu" placeholder="备注"></el-input>
          </el-form-item><br><hr>

          应收<br>
          <el-form-item label="*应收类型">
            <el-select v-model="contractDeleteForm.regionss" placeholder="应退类型">
              <el-option label="违约金" value="违约金"></el-option>
              <el-option label="租金" value="租金"></el-option>
              <el-option label="冷水" value="冷水"></el-option>
              <el-option label="电" value="电"></el-option>
              <el-option label="燃气/煤气" value="燃气和煤气"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="*金额(元)">
            <el-input v-model="contractDeleteForm.shou" placeholder="金额(元)" @change="changeshouprice(contractDeleteForm.shou)"></el-input>
          </el-form-item>

          <el-form-item label="*备注">
            <el-input v-model="contractDeleteForm.beizhus" placeholder="备注"></el-input>
          </el-form-item><br>

          <el-form-item label="备注:">
           <div class="text-area">
              <textarea placeholder="请输入备注" v-model="contractDeleteForm.remark"></textarea>
           </div>
          </el-form-item>


          <h3 style="color:orange ">合计(应退):{{totalprice}}元</h3>

          <el-button @click="cancel">取消解约</el-button>
          <el-button @click="queren">确认解约</el-button>

        </el-form>
      </el-tab-pane>
      <el-tab-pane label="解约状态" name="second">
        <span v-if="this.data==200" style="color: #1ab394">合同解约成功!</span>
        <span v-if="this.data!=200" style="color: red">合同解约失败!</span>
      </el-tab-pane>
    </el-tabs>
  </template>

<!--  弹出收房合同-->
  <el-dialog title="收房合同列表" :visible.sync="dialogTableVisible">
    <el-table :data="contractData">
      <el-table-column property="ownerName" label="业主姓名" width="150"></el-table-column>
      <el-table-column property="houseName" label="房产信息" width="200"></el-table-column>
      <el-table-column property="conSignTime" label="签约日期"></el-table-column>
      <el-table-column
        fixed="right"
        label="操作"
        width="100">
        <template slot-scope="scope">
          <el-button @click="chooseContract(scope.row)">选中</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!--    分页-->
    <el-pagination
      background
      @current-change="gopage"
      :page-size="pageSize"
      layout="prev, pager, next"
      :total="total">
    </el-pagination>
  </el-dialog>
</div>
</template>

<script>
export default {
  name: "index",
  data(){
    return{
      activeName:"first",
      //合同解约
      contractDeleteForm:{
        beizhu:"无",
        beizhus:"无",
      },
      //应退
      tableData1:[],
      //收房合同数据
      contractData:[],
      dialogTableVisible:false,
      total:0,
      pageSize:7,
      pageNum:1,
      totalprice:0,
      data:0,
    }
  },
  methods:{
    //页签
    handleClick(tab, event) {
      console.log(tab, event);
    },
    //点击按钮查询收房合同
    searchContract(){
      this.dialogTableVisible=true;
    },
    //分页
    gopage(page){
      this.pageNum=page;
      this.searchlist();
    },
    //查找合同
    searchlist(){
      this.axios.get("http://localhost:9321/shoufang/hetonglist?pageNum="+this.pageNum+"&pageSize="+this.pageSize).then(res=>{
        this.contractData=res.data.list;
        this.total=res.data.total;
      })
    },
    //选中的合同
    chooseContract(row){
     console.log(row);
     this.contractDeleteForm.sfContractId=row.id;
     this.contractDeleteForm.sfContractNo=row.sfContractNo;
     this.contractDeleteForm.houseName=row.houseName;
     this.contractDeleteForm.cqAddress=row.cqAddress;
     this.contractDeleteForm.houseZsNo=row.houseZsNo;
     this.contractDeleteForm.ownerName=row.ownerName;
     this.contractDeleteForm.ownerMobile=row.ownerMobile;
     this.contractDeleteForm.signUserName=row.signUserName;
     this.contractDeleteForm.signUserMobile=row.signUserMobile;
     this.contractDeleteForm.finalStatement=row.depositMoney;
     this.totalprice=row.depositMoney;
     this.dialogTableVisible=false;
    },
    //加上应退
    changetotalprice(tui){
      this.contractDeleteForm.finalStatement=parseFloat(this.contractDeleteForm.finalStatement)+parseFloat(tui);
      this.totalprice=parseFloat(this.totalprice)+parseFloat(tui);
    },
    //加上应收
    changeshouprice(show){
      this.contractDeleteForm.finalStatement=parseFloat(this.contractDeleteForm.finalStatement)-parseFloat(show);
      this.totalprice=parseFloat(this.totalprice)-parseFloat(show);
    },
    //解约
    queren(){
      //添加解约表,更改合同表这个合同的续约状态
      this.axios.post("http://localhost:9321/shoufang/jieyue",this.contractDeleteForm).then(res=>{
        if(res.data.code==200){
          this.$message.success("合同解约成功");
          this.contractDeleteForm={};
          this.totalprice=0;
          this.data=200;
          this.activeName="second";
        }
      })
    },
    //取消解约
    cancel(){
      this.$router.go(0);
    }
  },
  created() {
    this.searchlist();
  }
}
</script>

<style scoped>
.mystyle{
  margin-left: 50px;
}
.text-area{
  width: 100%;
  border-top:1px solid gainsboro;
  border-bottom:1px solid gainsboro;
}
</style>
